<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack"> 
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>系统通知</p>
		</div>
		<div class="details-content">
			<div class="details-top">
				<h1>{{record.system_title}}</h1>
				<div class="timer">
					<span class="year">{{year}}</span>
					<span class="time">{{time}}</span>
					<span class="location">来源：{{record.system_from}}</span>

				</div>
			</div>
			<div class="details-bottom">
				<div v-if="record.system_img!=''" class="img-box">
					<img :src="record.system_img|url"/>
				</div>
				<p>{{record.system_desc}}</p>
			</div>
		</div>
		
	</div>
</template>

<script>
	import axios from "axios";
	import user from '../../../utils/isLogin';

	export default{
		data(){
			return{
				record:{},
				year:0,
				time:0,
				img:''
			}
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		created(){
			var curr = plus.webview.currentWebview();
			axios.post(user.src + '/index/System/system_detail',{
				systemId: curr.systemId
			})
			.then(res => {
				
				if(res.data.status == 200){
					this.record = res.data.data;
					this.year = res.data.data.system_time.split(' ')[0];
					var arr = res.data.data.system_time.split(' ')[1];
					var str = arr.split(':');
					this.time = str[0] + ':' + str[1];
				}
			})
			.catch( error=> {
			   
			});
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		   } else {
		      document.addEventListener("plusready", plusReady, false);
		   }

		   
		},
		components:{
			
		},
		methods:{
			handleBack(){
				var messdetails = plus.webview.currentWebview();
				plus.webview.close(messdetails);
			}
		}
	}
</script>

<style lang='less'>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.details-content{
		padding: 160px 30px 30px 30px;
		.details-top{
			position: relative;
			padding-bottom: 20px;
			border-bottom: 1px solid #f6f6f6;
			h1{
				font-size: 36px;
				color: #000000;
				line-height: 36px;
			}
			.timer{
				padding-top:42px;
				color: #9a9a9a;
				font-size: 24px;
				line-height: 24px;		
				.time{
					margin: 0 54px 0 24px;	
				}
			}
		}
		.details-bottom{
			padding-top: 37px;
			.img-box{
				margin-bottom: 30px;
				width: 100%;
				img{
					display: block;
					width: 100%;
					height: auto;
				}
			}
			p{
				font-size: 29px;
				line-height: 54px;
				color: #323232;
				text-indent: 2em;
			}
		}
	}
</style>